<template>
  <div class="home">
    <div class="header">
      <div class="header-left">
     <el-select v-model="type" placeholder="请选择">
    <el-option
      label="收入"
      value="收入">
    </el-option>
     <el-option
      label="支出"
      value="支出">
    </el-option>
  </el-select>
  <el-input
    placeholder="请输入内容"
    prefix-icon="el-icon-search"
    v-model="input2">
  </el-input>
   <el-button @click="query">查询</el-button>
    <el-button @click="reset">重置</el-button>
      </div>
      <div class="header-right"></div>
        <el-button @click="add">新增信息</el-button>
    </div>
  <el-table
    :data="profileinfoData"
    style="width: 100%">
    <el-table-column
      label="日期"
      width="180">
      <template #default="scope">
        <i class="el-icon-time"></i>
        <span style="margin-left: 10px">{{  data(scope.row.date) }}</span>
      </template>
    </el-table-column>
        <el-table-column
      label="类型"
      width="180">
      <template #default="scope">
        <i class="el-icon-time"></i>
        <span style="margin-left: 10px">{{ scope.row.type==="支出"?"支出":"收入" }}</span>
      </template>
    </el-table-column>
        <el-table-column
      label="数目"
      width="180">
      <template #default="scope">
        <i class="el-icon-time"></i>
        <span style="margin-left: 10px">{{ scope.row.income }}</span>
      </template>
    </el-table-column>
    
    <el-table-column
      label="描述"
      width="180">
      <template #default="scope">
        <el-popover effect="light" trigger="hover" placement="top">
          <template #default>
            <p>详细描述: {{ scope.row.remark }}</p>
          
          </template>
          <template #reference>
            <div class="name-wrapper">
              <el-tag size="medium">{{ scope.row.describe}}</el-tag>
            </div>
          </template>
        </el-popover>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>


<edit-profile ref="editProfile"></edit-profile>
<add-profile ref="addProfile"></add-profile>
  </div>
</template>

<script>
import { mapActions, mapMutations, mapState } from 'vuex';
import {reqprofile} from '@api/profile.js';

import editProfile from '../../components/editProfile.vue';
import addProfile from '../../components/addProfile.vue';
export default {
name:"Home",
components: { editProfile,addProfile},
mounted(){
  // 初始化获取用户信息
  this.getProfileInfo()
},
data(){
  return{
    type:""
  }
},
computed:{
  ...mapState({profileinfoData:'profileinfo'}),
  

  
  
},
methods:{
  ...mapActions({
    getProfileInfo:'getProfileInfo',
    deleteprofile:'deleteprofile'
  }),
  ...mapMutations({
    queryprofile:'QueryProfileInfo'
  }),
  // 编辑信息
    handleEdit(index, row) {
        
       this.$refs.editProfile.openEditDialog({row:row,index:index})
       
      
      },
      // 删除信息
    handleDelete(index, row) {
      this.deleteprofile({index,_id:row._id})
      },
      data(val){
        let endindex= val.indexOf('T')
        let newval =val.substring(0,endindex)

        return newval
      },
      // 查询
    async  query(){
      const result=  await reqprofile({type:this.type})
      this.queryprofile(result)
     console.log(result);

      },
      // 重置
      reset(){
        this.type=""
      },
      // 新增信息
      add(){
         this.$refs.addProfile.openEditDialog()
      }
}
}
</script>

<style lang="less" scoped>
.home{
  height: 100%;
  background-color: bisque;
  .header{
  height: 20%;
  background-color: aquamarine;
  .header-left{
    width: 50%;

    display: flex;
  }
}
}

</style>>

